<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">优惠券记录</block>
		</cu-custom>
		<view class="bg-white">
			<view class="flex solid-bottom padding justify-between">
				<view class="cardtab">
					<text @click="changeTab(1)" :class="{'active':active===1}">全部</text>
					<text @click="changeTab(2)" :class="{'active':active===2}">已使用</text>
					<text @click="changeTab(3)" :class="{'active':active===3}">已过期</text>
				</view>
				<view class="cz">
					<image :src="imgurl+'/icon_edit.png'" class="mr5"></image>
					<text>管理</text>
				</view>
			</view>
		</view>
		<view v-if="active===1">
			<view class="qui-cells margin-sm zt">
				<view class="qui-cell" style="padding: 0 20upx 0 0;position: relative;">
					<view class="cell-hd">
						<view class="card_bg tc" :style="'background-image:url('+imgurl+'juan_bg01.png)'">
							<view class="text-white fs28 fw600 pt30">￥<text class="fs50 ff">100</text></view>
							<view class="fs22 text-white">满299元可用</view>
						</view>
					</view>
					<view class="cell-bd">
						<view class="fs26 fw600">国庆活动优惠券</view>
						<view class="juan">商城购物券</view>
						<view class="fs20 text-muted mt30">2019.09.15-2019.10.15</view>
					</view>
					<view class="cell-ft" style="display: none;">
						<radio></radio>
					</view>
					<view class="cell-ft" >
						<view>
							<image :src="imgurl+'/zt01.png'" class="ztimg"></image>
						</view>
					</view>
					<view class="carddate" :style="'background-image:url('+imgurl+'juan_bg03.png)'" style="display: none;">
						<view class="text-white tc mt15 ml20" style="font-size: 16upx;transform: rotate(40deg);">3天后可用</view>
					</view>
				</view>
			</view>

			<view style="height: 95upx;">
				<view class="cardbtn">
					优惠券记录
				</view>
			</view>

		</view>
		<view v-if="active===2">
		</view>
		<view v-if="active===3">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				imgurl:this.$imgurl,
			}
		},
		methods: {
			changeTab(index) {
				this.active = index
			},
			mdInfo() {
				uni.navigateTo({
					url: '/pages/home/mdInfoEdit'
				})
			}
		},
		
	}
</script>

<style lang="scss">
	.cardtab {
		text {
			font-size: 28upx;
			color: #585858;
			padding: 30upx;
		}

		.active {
			position: relative;
			font-size: 28upx;
			color: #1a1a1a;
			font-weight: 600;

			&:before {
				position: absolute;
				content: '';
				display: inline-block;
				width: 63upx;
				margin: 0 auto;
				left: 0;
				right: 0;
				bottom: 0;
				height: 6upx;
				background-color: #ff3a1a;
			}
		}
	}

	.cz {
		position: relative;

		&:before {
			content: '';
			display: inline-block;
			width: 1upx;
			top: 10upx;
			bottom: 10upx;
			left: -40upx;
			background-color: #e2e2e2;
			position: absolute;
		}

		image {
			width: 25upx;
			height: 25upx;
			position: relative;
			top: 3upx;
		}

		text {
			font-size: 24upx;
			color: #3757c2;
		}
	}

	.card_bg {
		width: 231upx;
		height: 181upx;
		background-size: 100% 100%;
	}

	.juan {
		padding: 0 5upx;
		height: 26upx;
		line-height: 26upx;
		display: inline-block;
		text-align: center;
		border-radius: 3upx;
		border: solid 1upx #6a83d7;
		font-size: 18upx;
		color: #6a83d7;
		box-sizing: content-box;
	}

	.usebtn {
		display: inline-block;
		height: 38upx;
		line-height: 38upx;
		background-color: #6a83d7;
		border-radius: 20upx;
		border: solid 1upx #6a83d7;
		font-size: 20upx;
		color: #ffffff;
		padding: 0 15upx;
		box-sizing: content-box;
	}

	.carddate {
		position: absolute;
		top: 0;
		right: 0;
		background-size: 100%;
		width: 94upx;
		height: 73upx;
	}

	.cardbtn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		display: inline-block;
		height: 95upx;
		line-height: 95upx;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 15upx 0px rgba(0, 0, 0, 0.05);
	}
	.ztimg{
		width: 120upx;
		height: 92upx;
	}
    .zt{
		position: absolute;
		left: 0;
		right: 0;
		z-index: 1;
		background-color: rgba(255,255,255,0.6);
	}
</style>
